<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- article -->
    <style>
        .forecast {
            margin: 0;
            padding: .3rem;
            background-color: #eee;
            font: 1rem 'Fira Sans', sans-serif;
        }

        .forecast>h1,
        .day-forecast {
            margin: .5rem;
            padding: .3rem;
            font-size: 1.2rem;
        }

        .day-forecast {
            background: right/contain content-box border-box no-repeat url('./media/examples/rain.svg') white;
        }

        .day-forecast>h2,
        .day-forecast>p {
            margin: .2rem;
            font-size: 1rem;
        }
    </style>

</head>

<body>

    <!-- article -->
    <!-- HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。 -->
    <!-- 使用说明 -->
    <!-- 每个<article>，通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。 -->
    <!-- 当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。 -->
    <!-- <article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。 -->
    <!-- <article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。 -->
    <!-- 可以使用<time> 元素的datetime属性来描述<article>元素的发布日期和时间。请注意<time>的pubdate 属性不再是W3C (en-US) HTML5标准。 -->
    <article>
        <h1>The BookYourHotel Blog</h1>
        <p>This Blog is specifically designed to provide details about BookYourHotel</p>
    </article>
    <article class="forecast">
        <h1>Weather forecast for Seattle</h1>
        <article class="day-forecast">
            <h2>03 March 2018</h2>
            <p>Rain.</p>
        </article>
        <article class="day-forecast">
            <h2>04 March 2018</h2>
            <p>Periods of rain.</p>
        </article>
        <article class="day-forecast">
            <h2>05 March 2018</h2>
            <p>Heavy rain.</p>
        </article>
    </article>

</body>

</html>